<template>
  <div :class="{ item: fixed }">
    <div
      :style="{ position: !fixed ? 'initial' : 'fixed' }"
      style="width: 100%; z-index: 1000"
    >
      <div class="top-bar-item">
        <router-link class="left" :to="clickLeftTo ? clickLeftTo : $route.path">
          <slot name="left"></slot>
        </router-link>

        <router-link
          class="middle"
          :to="clickTitleTO ? clickTitleTO : $route.path"
        >
          <slot name="middle"></slot>
        </router-link>

        <router-link
          class="right"
          :to="clickRightTO ? clickRightTO : $route.path"
        >
          <slot name="right"></slot>
        </router-link>
      </div>
    </div>
    <!-- <div style="height: 200px"></div> -->
  </div>
</template>

<script>
/**
 * kyle-headerTop
 * @module components/search
 * @desc 搜索框
 * @param {String}  clickLeftTo         - 点击左侧跳转的位置
 * @param {String}  clickTitleTO        - 点击标题跳转的位置
 * @param {String}  clickRightTO        - 右侧跳转的位置
 * @param {Boolean} fixed               - 是否固定在顶部
 * 
 * @slot
 * @params {left}     左侧内容
 * @params {middle}   中间内容
 * @params {right}    右侧内容
 * 
 * 
 * 
 * @example
<header-top clickLeftTo="/search" clickRightTO="/login">
  <template #left>
    <span class="iconfont icon-sousuo-copy"></span>
  </template>
  <template #middle>河北石家庄晋州市</template>
  <template #right> 登录注册 </template>
</header-top>
 */
export default {
  data() {
    return {};
  },
  props: {
    clickLeftTo: {
      type: String,
      default: "",
    },
    clickTitleTO: {
      type: String,
      default: "",
    },
    clickRightTO: {
      type: String,
      default: "",
    },
    fixed: {
      type: Boolean,
      default: false,
    },
  },
  components: {},

  computed: {},

  methods: {},
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>

.item::after
  content: "";
  display: block;
  height: 53px;
.top-bar-item
    background-color: rgb(0, 147, 117)
    display: flex
    justify-content: space-between
    align-items: center
    padding-top: 15px
    padding-bottom: 15px
    padding-right: 10px
    padding-left: 10px
    color: #fff
    font-size: 20px
    height: 30px

.top-bar-item >>> a
    color: #fff
    font-size: 20px
    text-decoration: none

.left
    font-size:25px

.middle
    max-width: 4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size:20px

.right
    font-size:18px !important;
    max-width: 72px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
</style>
